<!-- eslint-disable @typescript-eslint/no-explicit-any -->

<!-- eslint-disable @typescript-eslint/no-explicit-any -->

<!-- 业务选择器 -->
<template>
  <el-dialog :title="title" v-model="dialogVisible" width="70%" @close="handleClose">
    <div class="container">
      <el-table ref="chooseServiceDialogTableRef" v-loading="loading" :data="tableData" style="width: 100%"
        @selection-change="handleSelectionChange" :row-key="rowKey">
        <el-table-column type="selection" width="55" :reserve-selection="true" />
        <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width"
          :formatter="col.formatter" />
      </el-table>

      <div class="pagination">
        <el-pagination background layout="total, sizes, prev, pager, next" :total="total"
          v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
          @current-change="handlePageChange" @size-change="handleSizeChange" />
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm" :disabled="selectedData.length === 0">
          {{ confirmButtonText }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { computed, nextTick, ref } from 'vue'
import { useBusinessSelector } from './chooseServiceDialog'
import type { BusinessSelectorProps } from './chooseServiceDialogType'

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const rowKey = computed(() => (row: any) => {
  return String(row['id'])
})

const props = defineProps<BusinessSelectorProps>()
const emit = defineEmits(['update:visible', 'selected'])
const chooseServiceDialogTableRef = ref()
const {
  dialogVisible,
  tableData,
  selectedData,
  loading,
  currentPage,
  pageSize,
  total,
  handlePageChange,
  handleSizeChange,
  handleConfirm,
  handleClose
} = useBusinessSelector(props, emit, chooseServiceDialogTableRef)


const isInternalSelection = ref(false) // 重命名更清晰的标志位

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleSelectionChange = (val: any[]) => {
  if (isInternalSelection.value) return

  if (!props.isMultiple) {
    // 主动选择时进入处理流程
    const lastSelected = val.length > 0 ? val[val.length - 1] : null
    const shouldSelect = !selectedData.value.some(item => item['id'] === lastSelected?.['id'])
    // 通过标志位阻断循环
    isInternalSelection.value = true
    nextTick(() => {
      // 清空所有选择
      chooseServiceDialogTableRef.value?.clearSelection()
      // 如果需要选中新项
      if (lastSelected && shouldSelect) {
        chooseServiceDialogTableRef.value?.toggleRowSelection(lastSelected, true)
        selectedData.value = [lastSelected]
      } else {
        selectedData.value = []
      }
      // 必须延迟重置标志位
      setTimeout(() => {
        isInternalSelection.value = false
      }, 100)
    })
  } else {
    selectedData.value = val
  }
}


const confirmButtonText = computed(() => {
  return props.isMultiple
    ? `确定 (${selectedData.value.length})`
    : selectedData.value.length > 0
      ? '确定'
      : '请选择'
})
</script>

<style scoped>
.container {
  padding: 10px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
